
<style scoped lang="less">
.device-wrap{
	overflow: auto;
}
.device-list{
    padding-top: 10px;
    li{
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #BFDFF7;
        margin: 5px 0;
        margin-left: 10px;
        cursor: pointer;
        .icon-play{
            position: absolute;
            left: 5px;
            top: 9px;
            font-size: 8px;
            display: none;
        }
        &.active{
            color: #00E7FF;
            .icon-play{
                display: inline;
                color: #00E7FF;
            }
        }
    }
}
.filter-blk{
    position: relative;
    // z-index: 9999999999;
}
.el-date-range-picker {
 z-index: 9999;
}
</style>
<template>
	<div class="page-census page-setting">
		<div class="crumbs" v-if="siteInfos.userType==2">
			<router-link to="/">首页</router-link> / 消防档案 / 企业概览 / <span class="active">鹰眼回放</span>
		</div>
		<div class="crumbs" v-else>
			<router-link to="/">首页</router-link> / 一企一档 / <span class="active">{{businessName}}-鹰眼回放</span>
		</div>
        <el-container :style="{height: mainH+'px'}">
		  	<el-aside class="setting-nav-wrap" width="350px" style="padding: 20px">
		  		<!-- <div class="unit-search flex">
		  			<el-input class="flex-1" placeholder="搜索" v-model.trim="keyword"></el-input>
		  			<el-button type="primary" @click="searchUnit"><i class="iconfont icon-search"></i></el-button>
		  		</div> -->
                <h1 class="fs-16 mb-10">回放起始时间</h1>
                <el-form class="filter-blk flex-1">
                    <el-form-item>
                        <el-date-picker
                        v-model="startTime"
                        type="datetime"
                        placeholder="选择开始日期时间"
                        :picker-options="pickerOptionsStart"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item class="mt-10">
                        <el-date-picker
                        v-model="endTime"
                        type="datetime"
                        placeholder="选择结束日期时间"
                        :picker-options="pickerOptionsEnd"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                </el-form>
                <h1 class="fs-16 mt-10">监控设备列表</h1>
		  		<div class="device-wrap" :style="{height: (mainH-178)+'px'}">
		  			<ul class="device-list">
                        <li v-for="(item,index) in deviceList" :key="index"
                            :class="{active:item.isActive}"
                            @click="previewAction(item,index)">
                            <i class="iconfont icon-video"></i>
                            <i class="iconfont icon-play"></i>
                            {{item.name}}
                        </li>
                    </ul>
		  		</div>
		  	</el-aside>
		  	<el-main ref="rightBlk" class="setting-main">
                <!-- <el-form :inline="true" class="filter-blk flex-1">
                    <el-form-item class="ml-20" label="起始时间">
                        <el-date-picker
                            v-model="timeRange"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                            style="width:400px"
                            value-format="yyyy-MM-dd HH:mm:ss">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="searchAction">播放</el-button>
                    </el-form-item>
                </el-form> -->
                <div id="videoControl" class="video-control mt-20" :style="{width:videoWidth+'px',height: videoHeight+'px',margin:'0 auto'}"></div>
            </el-main>
        </el-container>
	</div>
</template>
<script>
import Handle from '@/components/HandleAlarm.vue'
import { mapState } from 'vuex'
export default {
	name: 'Notice',
	components:{
		Handle
	},
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	// <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
	data () {
		return {
            keyword:'',
			businessId: this.$route.query.id,
			businessName:  this.$route.query.name,
            deviceList: [],
            videoWidth: 100,
            videoHeight: 100,
            currentWinId: 0,
            totalWin: 25,
            timeRange:[],
            startTime: '',
            endTime:'',
            pickerOptionsStart: {
				disabledDate: time => {
					if (this.endTime) {
						return (
							time.getTime() > Date.parse(this.endTime)
						);
					}
					return false;
				}
			},
			pickerOptionsEnd: {
				disabledDate: time => {
					if (this.startTime) {
						return (
							time.getTime() < Date.parse(this.startTime)
						);
					}
					return false; 
				}
			},
		}
	},
	computed: {
		...mapState([
			'siteInfos'
		]),
		mainH () {
			return this.winH-180
		},
        startTimeStamp () {
            if(!this.startTime){
                return 0
            }
            return (+new Date(this.startTime))/1000
        },
        endTimeStamp () {
            if(!this.endTime){
                return 0
            }
            return (+new Date(this.endTime))/1000
        }
	},
	watch: {
	},
	methods: {
		getData(){
			this.loading = true
			this.$get('/fireFightingIOT/device/deviceCameraList', {
                businessId: this.businessId
            }).then(res => {
            	this.loading = false
                this.deviceList = res.data.map(item=>{
                    item.isActive = false
                    return item
                })
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		searchAction () {
			// this.getData(1)
		},
		previewAction (item,index) {
            if(this.startTimeStamp==0 || this.endTimeStamp==0){
                this.$message.error('请选择回放时间段')
                return
            }
			if(!oWebControl) return
            this.currentWinId ++
            this.currentWinId = Math.min(this.currentWinId,this.totalWin)
            this.startPlayback(item.number,this.startTimeStamp,this.endTimeStamp)
            this.deviceList[index].isActive = true
            this.deviceList.forEach((item,thisIndex)=>{
                item.isActive = index==thisIndex
            })
        },
		startPlayback (cameraIndexCode,startTimeStamp,endTimeStamp) {
            oWebControl.JS_RequestInterface({
				funcName: "startPlayback",
                argument: {
                    cameraIndexCode: cameraIndexCode, // 监控点编号
                    startTimeStamp: startTimeStamp, // 录像查询开始时间戳，单位：秒
                    endTimeStamp: endTimeStamp, // 录像查询结束时间戳，单位：秒
                    recordLocation: 1, // 录像存储类型 0-中心存储 1-设备存储
                    transMode: 1, // 传输协议 ，0-UDP 1-TCP
                    gpuMode: 0 // 是否开启 GPU 硬解，0-不开启 1-开启
                }
			})
        },
        initControl () {
            this.initVideoWebPlugin({
                containerId:'videoControl',
                width:this.videoWidth,
                height:this.videoHeight,
                layout: '1x1',
                playMode: 1
            },()=>{
                // this.startPreview(this.number)
            })
        }
	},
	created () {
		this.getData()
        let today = new Date().Format("yyyy-MM-dd");
        this.startTime = today+ ' 00:00:00'
        this.endTime = today+ ' 23:59:59'
	},
	activated () {},
	mounted () {
        // console.log(this.$refs.rightBlk)
        // console.log(this.$refs.rightBlk.$el.clientWidth)
        // console.log(this.$refs.rightBlk.$el.clientHeight)
        this.videoWidth = this.$refs.rightBlk.$el.clientWidth
        this.videoHeight = this.$refs.rightBlk.$el.clientHeight-30
        this.initControl()
    },
	destroyed () {
		 if (oWebControl != null){
			oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
			}, 
			function() {  // 断开与插件服务连接失败
			});
        }
	}
}
</script>
